{% extends 'application.html' %}
{% block content %}
<div class="row">
    {% include '_nav.html'%}
    <div class="span6">
        <form class="navbar-form pull-right">
            <input type="text" class="span3" placeholder="节点IP">
            <button type="submit" class="btn">查询</button>
        </form>
    </div>
</div>
<div class="row">
    <div class="span12">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th class="spna1">#</th>
                    <th class="span2">名称</th>
                    <th class="span2">节点IP</th>
                    <th class="span1">状态</th>
                    <th class="spna3">性能</th>
                    <th class="span3">操作</th>
                </tr>
            </thead>
            <tbody>
                {% for node in nodes %}
                <tr>
                    <td>{{node.id}}</td>
                    <td>{{node.name}}</td>
                    <td>{{node.host}}</td>
                    <td>
                        {% if node.status == 1 %}
                        <span class="label label-success">正常</span>
                        {% elif node.status == 3 %}
                        <span class="label label label-important">删除中...</span>
                        {% else %}
                        <span class="label label-important">异常</span>
                        {% endif %}
                    </td>
                    <td>
                        <div class="node-per">
                            <div class="node-per-status">
                                <span class="node-info">CPU</span>
                                <div class="progress progress-success">
                                    <div class="bar" style="width: 40%"></div>
                                </div>
                            </div>
                            <div class="node-per-status">
                                <span class="node-info">内存</span>
                                <div class="progress progress-danger">
                                    <div class="bar" style="width: 90%"></div>
                                </div>
                            </div>
                            <div class="node-per-status"></div>
                        </div>
                    </td>
                    <td>
                        <a href="/node/{{node.id}}" class="btn btn-mini">查看</a>
                        <a href="/node/{{node.id}}/edit" class="btn btn-mini">设置</a>
                        <a href="/node/{{node.id}}/destory" class="btn btn-mini">删除</a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}
